@import '../../../themes/basic/base-all.less';

:host {
  --ti-list-container-vertical-padding: var(--ti-common-space-base); // list 滚动容器的上下内边距
  --ti-list-option-container-height: 30px; // 下拉项的行高
  --ti-list-fold-icon-width: var(--ti-common-size-2x);
  --ti-list-fold-icon-height: calc(var(--ti-list-fold-icon-width) / 1.6); // 按照比例计算 8 / 5 = 1.6
  --ti-list-option-bg-color-active: var(--ti-common-color-bg-emphasize);
  --ti-list-fold-icon-color-active: var(--ti-common-color-icon-white);
  --ti-list-option-tworow-text-color: var(--ti-common-color-text-weaken);
  --ti-list-option-group-title-color: var(--ti-common-color-text-weaken);
}

:host {
  display: inline-block;

  overflow-y: auto;
  overflow-x: hidden;
  position: relative; // 设置为非static之后，内部li定位滚动条时方便
  padding: var(--ti-list-container-vertical-padding) var(--ti-common-space-0);
  box-sizing: border-box;

  &:focus {
    //阻止聚焦时浏览器默认蓝框样式
    outline: none;
  }
}

.ti3-dropdown-group > .ti3-dropdown-option {
  padding-left: var(--ti-common-space-3x);
}
.ti3-overflow-padding {
  padding: var(--ti-common-space-0) var(--ti-common-space-10);
  .ellipsis();
}

.ti3-dropdown-option {
  list-style: none;
  cursor: pointer;
  color: inherit;
  text-align: left;
  line-height: var(--ti-common-line-height-number);
  // 下拉框选项给一个默认的背景色（#fff，浏览器默认背景色）,为了解决火狐浏览器下下拉选项的省略号是一条横线 issue#9436
  background-color: var(--ti-common-color-bg-white-normal);
  padding: var(--ti-common-space-6) var(--ti-common-space-0);
  /**
      * tiTextweaken：对外暴露的属性，定义弱化信息的文本颜色
      *
      * 此处用于select组件选项两行信息的场景下
    */
  ::ng-deep [tiTextweaken] {
    color: var(--ti-list-option-tworow-text-color);
  }
}
.ti3-dropdown-option:first-child {
  margin-top: 0;
}

.ti3-dropdown-group-list {
  font-weight: bold;
  color: var(--ti-list-option-group-title-color);
  box-sizing: border-box;
  height: var(--ti-list-option-container-height);
  line-height: var(--ti-list-option-container-height);
  text-align: left;
}
.ti3-dropdown-group-list-cascader {
  position: relative;
  padding-right: var(--ti-common-space-4x);
  // 级联有下一级数据时，需要小三角箭头
  &::after {
    content: '';
    position: absolute;
    display: block;
    top: 50%;
    right: calc(var(--ti-common-space-3x) - 2px); // 视觉标注是12px,因为有旋转，需要减去2px
    transform: translateY(-50%) rotate(90deg);
    .triangle-up(var(--ti-list-fold-icon-width), var(--ti-list-fold-icon-height), var(--ti-common-color-icon-normal));
  }
}
.ti3-dropdown-option-selected.ti3-dropdown-group-list-cascader::after {
  border-bottom-color: var(--ti-common-color-icon-white);
}
.ti3-dropdown-option-disabled.ti3-dropdown-group-list-cascader::after {
  border-bottom-color: var(--ti-common-color-icon-disabled);
}

.ti3-dropdown-option.ti3-dropdown-option-disabled,
.ti3-dropdown-option.ti3-dropdown-option-disabled:hover,
.ti3-dropdown-option.ti3-dropdown-option-disabled ::ng-deep [tiTextweaken],
.ti3-dropdown-option.ti3-dropdown-option-disabled ::ng-deep [tiTextweaken]:hover {
  color: var(--ti-common-color-text-disabled);
  cursor: not-allowed;
}

.ti3-dropdown-no-data {
  padding: var(--ti-common-space-6) var(--ti-common-space-10);
  color: var(--ti-common-color-text-disabled);
  cursor: not-allowed;
  line-height: var(--ti-common-line-height-number);
}

.ti3-dropdown-option-hover,
.ti3-dropdown-option-hover ::ng-deep [tiTextweaken] {
  background-color: var(--ti-common-color-bg-white-emphasize);
  color: var(--ti-common-color-text-highlight);
}
// 做修改
.ti3-dropdown-option-selected,
.ti3-dropdown-option-selected ::ng-deep [tiTextweaken] {
  background-color: var(--ti-list-option-bg-color-active);
  color: var(--ti-common-color-text-white);
}
.ti3-drop-list-ul {
  overflow-y: auto;
  overflow-x: hidden;
}

.ti3-list-scroll-to-bottom-loading-container {
  position: absolute;
  bottom: -8px;
  width: calc(100% - 17px);
  text-align: center;
}

// 虚拟滚动
:host.ti3-virtual-scroll-list {
  display: block;
  overflow: hidden; // 滚动容器为 .ti3-virtual-scroll-list-viewport
  padding: var(--ti-common-space-0);
}
.ti3-virtual-scroll-list-viewport {
  height: 100%;
  width: 100%;
  max-height: inherit; // 由于在下拉类组件中会给ti-list设置最大高度，这里直接继承ti-list的最大高度
  min-height: 38px; // 无数据时限制最小高度 无数据内容高度30px + 容器上下padding和8px
  padding: var(--ti-list-container-vertical-padding) var(--ti-common-space-0);
  box-sizing: border-box;
}
::ng-deep .ti3-virtual-scroll-list-viewport .cdk-virtual-scroll-content-wrapper {
  width: 100%;
  top: var(--ti-list-container-vertical-padding);
}
::ng-deep .ti3-virtual-scroll-list-viewport .cdk-virtual-scroll-spacer {
  top: calc(var(--ti-list-container-vertical-padding) * 2);
}
::ng-deep .ti3-virtual-scroll-list-viewport.ti3-virtual-scroll-list-viewport-with-selectall .cdk-virtual-scroll-spacer {
  top: calc(var(--ti-list-container-vertical-padding) * 2 + 30px);
}
.ti3-list-loading {
  display: flex;
  padding: var(--ti-common-space-6) var(--ti-common-space-10);
}
::ng-deep .ti3-virtual-scroll-list .ti3-list-loading {
  padding: var(--ti-common-space-10);
}
